<template>
    <el-dialog v-model="drawer" title="导入名单" :append-to-body="true" width="670px" custom-class="activeCreate" destroy-on-close @close="close">
        <el-form :model="form" :rules="rules" size="small" ref="ruleRefForm" label-width="110px">
            <el-form-item label="来源活动：" prop="activityId">
                <el-select v-model="form.activityId" placeholder="请选择" size="small" style="width:205px">
                    <el-option
                        v-for="item in activeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="线索归属部门：" prop="deptId">
                <el-select v-model="form.deptId" placeholder="请选择" size="small" style="width:205px" >
                    <el-option
                        v-for="item in deptList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="线索归属人：" prop="userId">
                <el-select v-model="form.userId" placeholder="请选择" size="small" style="width:205px" @change="selCreateUser">
                    <el-option
                        v-for="item in userList"
                        :key="item.userId"
                        :label="item.nickname"
                        :value="item.userId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="导入客户名单：" width="280">
                <el-upload ref="uploadRef" class="upload-demo" drag :action="action" :headers="headers" :auto-upload="false" :data="form" :limit="1" :on-success="successFile" :on-error="errorFile">
                    <el-icon class="el-icon--upload">
                        <!-- <upload-filled /> -->
                    </el-icon>
                    <div class="el-upload__text">
                        拖动文件或 <em>点击上传</em>
                    </div>
                    <template #tip>
                    <!-- <div class="el-upload__tip">
                        上传Excel客户名单文件
                    </div> -->
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-row justify="center">
                <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">提交</el-button>
                <el-button size="small" type="default" @click="close">取消</el-button>
            </el-row>
        </template>
    </el-dialog>
</template>

<script>
import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Session } from '/@/utils/storage'
import {getDeptSelector} from '/@/api/sys/dept'
import api from '/@/api/commonApi'

export default {
    name: 'uploadModel',
    props: {
        dialogDrawer: {
            props: Boolean,
            default: false
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context){
        const { dialogDrawer } = toRefs(props)
        const ruleRefForm = ref()
        const uploadRef = ref()
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const state = reactive({
            action: '/api/ums/customer/upload',
            headers: {
                '17work': Session.get('token')
            },
            form: {
                activityId: '',
                userId: '',
                userName: '',
                deptId: '',
            },
            rules: {
                activityId: [{ required: true, message: '请选择活动', trigger: 'blur' }]
            },
            userList: [],
            activeList: [],
            deptList: [],
        })
        const reset = () => {
            state.form = {
                activityId: '',
                userId: '',
                userName: '',
                deptId: '',
            }
        }
        const getList = () => {
            api.marketAllList({
                current: 1,
                size: 1000
            }).then(res => {
                state.activeList = res.data.records
            })
            api.getEnterpriseUsers().then(res => {
                state.userList = res.data
            })
        }
        const close = () => {
            reset()
            context.emit('update:dialogDrawer', false)
        }
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate(valid => {
                if (valid) {
                    uploadRef.value.submit()
                }
            })
        }
        const successFile = (e) => {
            console.log(e);
            if (e.code == 0) {
                ElMessage.success("导入成功")
                close()
            }else{
                ElMessage.error(e.message)
            }
        }
        const errorFile = (e) => {
            console.log(e);
        }
        const selCreateUser = (e) => {
            const user = state.userList.find(item => {
                return item.userId == e
            })
            state.form.userName = user.nickname
        }
        const getDeptList = () => {
            getDeptSelector().then(res => state.deptList = res.data)
        }

        onMounted(() => {
            getList()
            getDeptList()
        })
        return {
            ...toRefs(state),
            drawer,
            close,
            getList,
            errorFile,
            uploadRef,
            submitForm,
            ruleRefForm,
            successFile,
            selCreateUser,
        }
    }

}
</script>

<style lang="scss" scoped>
</style>